<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div>
            <div>场景信息</div>
            <div>
                <div>地市:哈尔滨</div>
                <div>网格:松北区世贸大道网格</div>
                <div>场景分类:套餐升档</div>
                <div>是否配置引导语:是</div>
                <div>引导语:XXXXX</div>
            </div>
        </div>
        <div>
            <el-button type="primary" style="margin: 16px 0 0 16px;">新增</el-button>
        </div>
        <div class="table_container">
            <el-table :data="tableData" highlight-current-row style="width: 100%">
                <el-table-column type="index" width="100">
                </el-table-column>
                <el-table-column property="org" label="用户话术">
                </el-table-column>
                <el-table-column property="wg" label="营销员话术">
                </el-table-column>
                <el-table-column property="registe_time" label="权重">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import headTop from '../components/headTop'
import { getUserList, getUserCount } from '@/api/getData'
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                org: '请问宽带如何提速',
                wg: "宽带提速需要XXXXXXXX",
                registe_time: '10%',
                username: '套餐升档',
                city: '是',
                ydy: '我要开始答题'
            }, {
                org: '请问宽带如何提速',
                wg: "宽带提速需要XXXXXXXX",
                registe_time: '10%',
                username: '宽带提速',
                city: '否',
                ydy: ''
            }, {
                org: '请问宽带如何提速',
                wg: "宽带提速需要XXXXXXXX",
                registe_time: '10%',
                username: '数字视听',
                city: '否',
                ydy: ''
            }, {
                org: '请问宽带如何提速',
                wg: "宽带提速需要XXXXXXXX",
                registe_time: '10%',
                username: '惠心服务',
                city: '是',
                ydy: '我要开始答题'
            }],
            currentRow: null,
            offset: 0,
            limit: 20,
            count: 0,
            currentPage: 1,
        }
    },
    components: {
        headTop,
    },
    created() {
        this.initData();
    },
    methods: {
        async initData() {
            try {
                const countData = await getUserCount();
                if (countData.status == 1) {
                    this.count = countData.count;
                } else {
                    throw new Error('获取数据失败');
                }
                this.getUsers();
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            this.getUsers()
        },
        async getUsers() {
            const Users = await getUserList({ offset: this.offset, limit: this.limit });
            this.tableData = [];
            Users.forEach(item => {
                const tableData = {};
                tableData.username = item.username;
                tableData.registe_time = item.registe_time;
                tableData.city = item.city;
                this.tableData.push(tableData);
            })
        }
    },
}
</script>

<style lang="less">
@import '../style/mixin';

.table_container {
    padding: 20px;
}
</style>
